<template>
  <div class="pui-popper">
    <Popper
      :arrow="arrow"
      :class="theme"
      @close:popper="toggleClose"
      @open:popper="toggleOpen"
      :placement="placement"
      :disabled="disabled"
      :show="showPopper"
      v-if="popperControl"
    >
      <slot />
      <template #content>
        <slot name="popper" />
      </template>
    </Popper>
    <Popper
      :arrow="arrow"
      :class="theme"
      @close:popper="toggleClose"
      @open:popper="toggleOpen"
      :placement="placement"
      :disabled="disabled"
      v-else
    >
      <slot />
      <template #content>
        <slot name="popper" />
      </template>
    </Popper>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'pui-popper',
});
</script>

<script lang="ts" setup>
import Popper from 'vue3-popper';

import type { Props } from './interface';

withDefaults(defineProps<Props>(), {
  placement: 'right',
  theme: 'light',
  arrow: true,
  disabled: false,
  popperControl: false,
  showPopper: false,
});

const emits = defineEmits<{
  onOpen: [val: boolean];
  onClose: [val: boolean];
}>();

const toggleOpen = () => {
  emits('onOpen', true);
};
const toggleClose = () => {
  emits('onClose', false);
};
</script>
